<template>
	<view>
		<!-- 自定义导航 -->
		<uni-nav-bar left-icon="left" statusBar :border="false" @clickLeft="goBack">
			<view class="flex align-center justify-center w-100">
				所有人可见 <text class="iconfont icon-shezhi"></text>
			</view>	
		</uni-nav-bar>
		<!-- 文本域组件 -->
		<textarea v-model="content" placeholder="说一句话吧~" class="uni-textarea px-2" />
		<!-- 多图上传 -->
		<upload-image ref="uploadImage" :show="show" :list="imageList" @change="changeImage"></upload-image>
		<!-- 底部操作条 -->
		<view class="fixed-bottom bg-white flex align-center">
			<view class="iconfont icon-caidan foot-btn animated" hover-class="rubberBand"></view>
			<view class="iconfont icon-huati foot-btn animated" hover-class="rubberBand"></view>
			<view class="iconfont icon-tupian foot-btn animated" hover-class="rubberBand" @click="iconClickEvent('uploadImage')"></view>
			<view 
			class="send-btn bg-main text-white ml-auto flex justify-center align-center rounded mr-2 animated"
			 hover-class="rubberBand"
			>发送</view>
		</view>
	</view>
</template>

<script>
	// 引入多图上传组件
	import uploadImage from '@/components/common/upload-image.vue';
	export default {
		components: {
			uploadImage
		},
		data() {
			return {
				//内容
				content: '',
				//图片列表
				imageList: [],
				//是否已经弹出提示框
				showBack: false
			}
		},
		//监听页面返回
		onBackPress() {
			//保存草稿判断
			if((this.content !== '' || this.imageList.length > 0) && !this.showBack) {
				uni.showModal({
					content: '是否要保存为草稿？',
					showCancel: true,
					cancelText: '不保存',
					confirmText: '保存',
					success: res => {
						//点击保存
						if(res.confirm) {
							this.store();
						}else {
							//清除缓存
							uni.removeStorage({
								key: 'add_input'
							});
						}
						//手动执行返回
						uni.navigateBack({ delta: 1 });
					}
				});
				this.showBack = true;
				return true;
			}
		},
		computed: {
			show() {
				return this.imageList.length > 0;
			}
		},
		onLoad() {
			//获取本地存储
			uni.getStorage({
				key: 'add_input',
				success: res => {
					if(res.data) {
						let result = JSON.parse(res.data);
						this.content = result.content;
						this.imageList = result.imageList;
					}
				}
			})
		},
		methods: {
			//底部图标点击事件
			iconClickEvent(e) {
				if(e === 'uploadImage') {
					this.$refs.uploadImage.chooseImage();
				}
			},
			//接受选择图片
			changeImage(data) {
				this.imageList = data;
			},
			//保存草稿
			store() {
				//本地存储
				uni.setStorage({
					key: 'add_input',
					data: JSON.stringify({
						content: this.content,
						imageList: this.imageList
					})
				})
			},
			//自定义导航返回事件
			goBack() {
				uni.navigateBack({ delta: 1 });
			}
		}
	}
</script>

<style scoped>
.fixed-bottom {
	height: 85rpx;
}
.foot-btn {
	display: flex;
	width: 85rpx;
	height: 85rpx;
	justify-content: center;
	align-items: center;
	font-size: 50rpx;
}
.send-btn {
	width: 140rpx;
	height: 60rpx;
}
</style>
